<template>
    <div class="app">
        <HeaderComp title="选择商户" class="head-top" />
        <div class="content">
            <div class="search-father">
                <div class="search-box">
                    <van-icon name="search"></van-icon>
                    <input
                        type="text"
                        v-model="value"
                        placeholder="请输入关键字模糊搜索"
                    />
                </div>
            </div>
            <div class="bank-list">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    :error.sync="error"
                    finished-text="没有更多了"
                    error-text="请求失败，点击重新加载"
                    @load="onLoad"
                >
                    <van-checkbox-group v-model="result">
                        <van-cell-group>
                            <van-cell
                                v-for="(item, index) in list"
                                clickable
                                :key="index"
                                :title="`复选框 ${item.label}`"
                                @click="toggle(item, index)"
                                center
                                :label="`${item.label}`"
                            >
                                <template #right-icon>
                                    <van-checkbox
                                        :name="item.value"
                                        checked-color="#feb518"
                                        ref="checkboxes"
                                    />
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </van-checkbox-group>
                </van-list>
            </div>
            <div class="comfirm" v-if="false">
                <van-button
                    block
                    type="info"
                    color="#FFB72F"
                    @click="nextStep"
                    class="next-step-btn"
                    >确认</van-button
                >
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "SelectMerchant",
    components: {
        HeaderComp: () => import("@/components/HeaderComps"),
    },
    data() {
        return {
            error: false,
            loading: false,
            finished: false,
            value: "",
            list: [
                {
                    label: "a",
                    value: 1,
                },
                {
                    label: "a",
                    value: 2,
                },
                {
                    label: "a",
                    value: 3,
                },
                {
                    label: "a",
                    value: 4,
                },
                {
                    label: "a",
                    value: 5,
                },
                {
                    label: "a",
                    value: 6,
                },
            ],
            result: [],
        };
    },
    mounted() {},
    methods: {
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                }

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.list.length >= 40) {
                    this.finished = true;
                }
            }, 1000);
            setTimeout(() => {
                this.error = true;
            }, 2000);
        },
        toggle(item, index) {
            this.$refs.checkboxes[index].toggle();
        },
    },
};
</script>

<style lang="less" scoped>
.app {
    background: #f9f9f9;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    padding-top: 236px;
}
.content {
    height: 100%;
    .search-father {
        background: #f9f9f9;
        padding: 24px 0;
        position: fixed;
        top: 112px;
        left: 0;
        right: 0;
        z-index: 98;
        .search-box {
            display: flex;
            align-items: center;
            background: #fff;
            width: 80%;
            height: 76px;
            border-radius: 15px;
            margin: 0 auto;
            font-size: 31px;
            padding-left: 15px;
            input {
                border: none;
                margin-left: 10px;
                flex: 1;
            }
        }
    }
    .bank-list {
        padding-bottom: 100px;
    }
    .comfirm {
        padding: 90px 75px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 98;
        background: #fff;
    }
}
</style>
